<template>
    <div>
        <Form ref="form" :model="{}" :label-width="120" class="custom" v-if="setting.length > 0">
            <Col :span="16">
                <Card style="margin-bottom:20px;">
                    <FormItem v-for="(item, i) in setting" :key="i" :label="item.name">

                        <Input v-if="item.type == 'input'" v-model="value[item.en]" />

                        <span v-if="item.type == 'int'"><InputNumber v-model="value[item.en]" /> {{item.unit}}</span>

                        <span v-if="item.type == 'float'"><Input v-model="value[item.en]" /> {{item.unit}}</span>

                        <DatePicker v-if="item.type == 'date'" type="date" :value="value[item.en]" @on-change="v=>{value[item.en] = v}" style="width:350px;"></DatePicker>

                        <DatePicker v-if="item.type == 'datetime'" type="datetime" :value="value[item.en]" @on-change="v=>{value[item.en] = v}" style="width:350px;"></DatePicker>

                        <Input v-if="item.type == 'textarea'" v-model="value[item.en]" type="textarea" :autosize="{minRows: 2,maxRows: 10}" />

                        <RadioGroup v-if="item.type == 'radio'" v-model="value[item.en]" type="button">
                            <Radio v-for="(r,k) in item.option" :key="k" :label="r"></Radio>
                        </RadioGroup>

                        <CheckboxGroup v-if="item.type == 'checkbox'" v-model="value[item.en]">
                            <Checkbox v-for="(r,k) in item.option" :key="k" :label="r"></Checkbox>
                        </CheckboxGroup>

                        <Upload v-if="item.type == 'image'"
                            :action="uploadApi"
                            :default-file-list="value[item.en]"
                            :headers="headers"
                            accept="image/*"
                            :on-remove="(file, fileList)=>{
                                onRemove(item.en, fileList)
                            }"
                            :on-success="(res, file, fileList)=>{
                                onSuccess(item.en, fileList)
                            }"
                            >
                            <Button icon="ios-cloud-upload-outline">上传</Button>
                        </Upload>

                        <Upload v-if="item.type == 'file'"
                            :action="uploadApi"
                            :default-file-list="value[item.en]"
                            :headers="headers"
                            :format="item.ext"
                            :on-remove="(file, fileList)=>{
                                onRemove(item.en, fileList)
                            }"
                            :on-success="(res, file, fileList)=>{
                                onSuccess(item.en, fileList)
                            }"
                            >
                            <Button icon="ios-cloud-upload-outline">上传</Button> 允许上传的文件类型{{item.ext}}
                        </Upload>

                        <quill-editor v-if="item.type == 'editor'"
                            v-model="value[item.en]" 
                            >
                        </quill-editor>
                    </FormItem>
                </Card>
            </Col>
        </Form>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor';
    export default {
        props: ['value', 'setting'],
        components: {
            quillEditor,
        },
        data() {
            return {
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            
        },
        methods: {
            //文件上传
            onRemove(field, fileList) {
                this.bus.$emit('file_update', {field, fileList});
            },
            onSuccess(field, fileList) {
                var ls = [];
                for(let k in fileList) {
                    if(fileList[k].response) {
                        var url = fileList[k].response.msg;
                    }else{
                        var url = fileList[k].url;
                    }
                    ls.push({name: fileList[k].name, url: url});
                }
                this.bus.$emit('file_update', {field:field, fileList:ls});
            },
        }
    }
</script>
<style>
.custom .ivu-input-wrapper{width:50%;}
</style>
